<template>
    <!-- 侧边栏模板 -->
    <div class="aside-box" style="overflow:hidden;">
        <!-- logo -->
        <el-container class="aside-logo-box">
            <div class="aside-logo-title">
                <span style="font-size: 22px;color: #32CD32;font-weight: bold;font-style:italic; ">{{logoName}}</span>
                <span style="font-size: 20px;margin-left: 5px;">{{logoTitle}}</span>
            </div>
        </el-container>
        <!-- menu -->
        <el-aside width="100%;" style="overflow: hidden;">
            <el-menu
                    :collapse="false"
                    background-color="#3a4651"
                    text-color="#9ca2a8"
                    :active-text-color="themeColor"
                    :default-active="currentMenuItemIndex"
                    unique-opened
                    router
                    style="border-right: none;"
            >
                <!--  列表渲染菜单 -->
                <div v-for="menuItem_P of menuData">
                    <!-- 无子菜单 -->
                    <el-menu-item
                            v-if="menuItem_P.children.length===0&&user.role==menuItem_P.permission"
                            :index="menuItem_P.path"
                            :class="setActive(menuItem_P.path)"
                            @click="handelMenuItem(menuItem_P.path)"
                    >
                        <i :class="menuItem_P.ico"></i>
                        <span slot="title" class="aside-text-margin">{{menuItem_P.title}}</span>
                    </el-menu-item>
                    <!-- 有子菜单 -->
                    <el-submenu
                            v-else-if="user.role==menuItem_P.permission"
                            :index="menuItem_P.path"
                            :class="setActive(menuItem_P.path)"
                    >
                        <template slot="title">
                            <i :class="menuItem_P.ico"></i>
                            <span slot="title" class="aside-text-margin">{{menuItem_P.title}}</span>
                        </template>
                        <el-menu-item
                                v-for="menuItem_C of menuItem_P.children"
                                :index="menuItem_C.path"
                                @click="handelMenuItem(menuItem_C.path)"
                        >{{menuItem_C.title}}
                        </el-menu-item>
                    </el-submenu>
                </div>
            </el-menu>
        </el-aside>
        <!--
        <el-container direction="vertical">
            <el-col :span="24" class="main-h-center" style="margin-top:20px;">
                <div style="width:130px;height:130px;">
                    <img style="width:100%;height:100%" src="../assets/wxapp.jpg" alt>
                </div>
            </el-col>
            <el-col :span="24" class="main-h-center" style="margin-top:10px;">
                <div style="color:#fff">微信扫码使用小程序版本</div>
            </el-col>
        </el-container>
        -->
    </div>
</template>

<script>
    import {mapGetters} from "vuex";

    export default {
        name: "igfaside",
        props: {},
        data() {
            return {
                currentMenuItemIndex: ""
            };
        },
        methods: {
            handelMenuItem(index) {
                this.currentMenuItemIndex = index;
            },
            setActive(routerPath) {
                return this.currentMenuItemIndex.startsWith(routerPath)
                    ? "aside-menu-active"
                    : "";
            }
        },
        computed: {
            ...mapGetters(["logoTitle", "logoName", "logoImg", "themeColor", "menuData", "user"])
        },
        mounted() {
            this.currentMenuItemIndex = this.$route.path;
        }
    }
    ;
</script>

<style>
    .aside-box {
        width: 220px;
        height: 100%;
        background-color: #3a4651;
    }

    .aside-logo-box {
        height: 70px;
        display: flex;
        align-items: Center;
    }

    .aside-text-margin {
        margin-left: 8px;
    }

    .aside-menu-active,
    .aside-menu-active .el-submenu__title {
        background-color: #32CD32 !important;
    }

    .aside-menu-active i,
    .aside-menu-active span,
    .aside-menu-active .el-submenu__title i,
    .aside-menu-active .el-submenu__title span {
        color: #ffffff !important;
    }

    .aside-logo-img {
        width: 45px;
        height: 26px;
        margin-left: 20px;
    }

    .aside-logo-title {
        font-size: 24px;
        color: #fff;
        margin: -3px auto 0;
    }
</style>
